import React from 'react';
import About from './index/About'
import Home from './index/Home'
import Sys from './index/Sys'
import SideBar from './layout/SideBar'
import { Row, Col } from 'antd'
import './App.css'
import NoMatch404 from './index/NoMatch404'
import Topics from './index/Topics'
import { Route, Link, Switch, NavLink } from 'react-router-dom';

export default class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      router: 'home'
    }
  }
  componentDidMount() {
  }

  render() {
    return (
        <div>
          <Row className='header'>
            <Col span={4}><Link activeclassname='hurry' to="/">Home</Link></Col>
            <Col span={4}><NavLink activeclassname='hurry' to="/about?a=12">About</NavLink></Col>
            <Col span={4}><Link to="/users/">Users</Link></Col>
            <Col span={4}><Link to="/about/">about</Link></Col>
            <Col span={4}><Link to="/sys">sys</Link></Col>
            <Col span={4}><Link to="/topics">topics</Link></Col>
          </Row>
          <Row>
            <Col span={4}><SideBar></SideBar></Col>
            <Col span={20}>
              <Switch>
                <Route path='/' exact component={Home}></Route>
                <Route path='/about' component={About}></Route>
                <Route path='/sys' component={Sys}></Route>
                <Route path='/topics' component={Topics}></Route>
                <Route component={NoMatch404}></Route>
              </Switch>
            </Col>
          </Row>
        </div>
    );
  }
}

